<template>
  <div class="dialog-content">
    <!-- <el-form label-width="90px" v-if="field">
      <el-form-item label="日期 (PEK)">
        <el-date-picker
          v-model="field.eventDate"
          type="date"
          format="YYYY-MM-DD"
          disabled
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="时间 (PEK)">
        <el-time-picker
          v-model="field.origionTime"
          format="HH:mm:ss"
          disabled
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="航班号">
        <el-input
          v-model="field.flightNumber"
          @input="handleInputFlightNumber"
          maxlength="9"
          style="width: 100%"
          placeholder=""
        />
      </el-form-item>
      <el-form-item label="起飞机场">
        <el-input
          v-model="field.departureAirport"
          @input="handleInputDepartureAirport"
          maxlength="4"
          style="width: 100%"
          placeholder=""
        />
      </el-form-item>
      <el-form-item label="目的地机场">
        <el-input
          v-model="field.destinationAirport"
          @input="handleInputDestinationAirport"
          maxlength="4"
          style="width: 100%"
          placeholder=""
        />
      </el-form-item>
      <el-form-item label="机组意图">
        <el-radio-group
          v-model="field.crewIntention"
          @change="handleChangeCrewIntention"
        >
          <el-radio value="ALT">备降</el-radio>
          <el-radio value="RTN">返航</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        :label="`${field.crewIntention == 'ALT' ? '备降' : '返航'}原因`"
      >
        <el-select v-model="field.eventReason" style="width: 100%">
          <el-option value="天气">天气</el-option>
          <el-option value="故障">故障</el-option>
          <el-option value="旅客">旅客</el-option>
          <el-option value="其他">其他</el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        :label="`紧急${field.crewIntention == 'ALT' ? '备降' : '返航'}`"
      >
        <el-radio-group v-model="field.isEmergency">
          <el-radio :value="0">否</el-radio>
          <el-radio :value="1">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="备降机场">
        <el-input
          v-model="field.diversionAirport"
          @input="handleInputDiversionAirport"
          maxlength="4"
          style="width: 100%"
          placeholder=""
          :disabled="field.crewIntention != 'ALT'"
        />
      </el-form-item>

      <el-form-item label="计划备降场">
        <el-radio-group
          v-model="field.isPlannedDiversionAirport"
          :disabled="field.crewIntention != 'ALT'"
        >
          <el-radio :value="1">是</el-radio>
          <el-radio :value="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="saveRecord" :disabled="!isFieldValid"
          >保存记录</el-button
        >
        <el-button type="primary" link @click="newField">重置</el-button>
      </el-form-item>
    </el-form> -->
    <!-- <el-divider /> -->
    <!-- <pre>{{ field }}</pre> -->
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import axios from "axios";
import dayjs from "dayjs";
import useSeatStore from "@/store/seat.js";

import * as inputHandler from "./inputHandler.js";

const seatStore = useSeatStore();

const props = defineProps({ seatInfo: { type: Object, required: true } });

const isLoading = ref(false);
const field = ref();

const newField = () => {
  field.value = {
    number: null,
    eventDate: new Date(), // 事件日期
    flightNumber: "", // 航班号
    departureAirport: "", // 原起飞机场
    destinationAirport: "", // 原目落地机场
    diversionAirport: "", // 备降机场
    crewIntention: "ALT", // 机组意图 (ALT/RTN)
    eventReason: "天气", // 备降原因 (天气/故障/旅客/其他)
    isEmergency: 0, // 是否为紧急情况 (0/1)
    origionSeatIP: seatStore.currentSeat.ip, // 初始席位IP地址 (string)
    origionSeatName: seatStore.currentSeat.seatName, // 初始席位名称 (null/string)
    origionSeatUser: seatStore.currentSeatData
      ? seatStore.currentSeatData.users.map((u) => u.userName).join(", ")
      : "未知", // 初始席位协调席管制员 (null/array)
    origionTime: new Date(), // 初始席位录入时间 (null/datetime)
    aircraftType: "", // 航空器机型
    isPlannedDiversionAirport: 1, // 是否为计划内的备降场
    reportPlan: 0, // 是否报告计划室 (0/1)
    reportPlanSeatIP: "", // 报告计划室席位IP (null/string)
    reportPlanSeatName: "", // 报告计划室席位名称 (null/string)
    reportPlanSeatUser: "", // 报告计划室席位协调席管制员 (null/array)
    reportPlanTime: null, // 报告计划室时间 (null/datetime)
    reportFlow: 0, // 是否报告ACCFlow (0/1)
    reportFlowSeatIP: "", // 报告ACCFlow席位IP (null/string)
    reportFlowSeatName: "", // 报告ACCFlow席位名称 (null/string)
    reportFlowSeatUser: "", // 报告ACCFlow席位协调席人员 (null/array)
    reportFlowTime: null, // 报告ACCFlow事件(null/datetime)
  };
};

const handleChangeCrewIntention = (value) => {
  if (value == "RTN") {
    field.value.diversionAirport = field.value.destinationAirport;
  } else if (value == "ALT") {
    if (field.value.diversionAirport == field.value.destinationAirport) {
      field.value.diversionAirport = "";
    }
  }
  field.value.isPlannedDiversionAirport = 1;
};

const handleInputFlightNumber = (value) => {
  // 航班号：只允许输入数字和字母
  field.value.flightNumber = inputHandler.upperLetterAndNumber(value);
};

const handleInputDepartureAirport = (value) => {
  // 起飞机场：只允许输入字母
  field.value.departureAirport = inputHandler.upperLetterOnly(value);
};

const handleInputDestinationAirport = (value) => {
  // 只目的地机场：允许输入字母
  field.value.destinationAirport = inputHandler.upperLetterOnly(value);
};

const handleInputDiversionAirport = (value) => {
  // 备降机场：只允许输入字母
  field.value.diversionAirport = inputHandler.upperLetterOnly(value);
};

const isOpened = ref(false);
const openCreate = () => {
  if (isOpened.value) {
    isOpened.value = false;
  } else {
    isOpened.value = true;
    newField();
  }
};

const isFieldValid = computed(
  () =>
    field.value.eventDate &&
    field.value.flightNumber.length > 3 &&
    field.value.departureAirport.length == 4 &&
    field.value.destinationAirport.length == 4 &&
    field.value.diversionAirport.length == 4
);

const saveRecord = () => {
  isLoading.value = true;
  const data = JSON.parse(JSON.stringify(field.value));
  data.eventDate = dayjs(field.value.eventDate).format("YYYY-MM-DD");
  data.origionTime = dayjs(field.value.origionTime).format(
    "YYYY-MM-DD HH:mm:ss"
  );

  const params = {
    action: "save",
    data,
  };

  axios
    .post("api/journal_diversion_share.php", params)
    .then((response) => {
      console.log("Note Diversion Create", response.data);
      if (response.data.result) {
        ElNotification({
          title: "保存成功",
          type: "success",
          duration: 1500,
        });
        openCreate();
      } else {
        ElNotification({
          title: "保存失败",
          type: "warning",
          duration: 1500,
        });
      }
      isLoading.value = false;
    })
    .catch((error) => {
      ElNotification({
        title: "保存失败",
        message: error.message,
        type: "error",
        duration: 1500,
      });
      isLoading.value = false;
    });
};

defineExpose({ openCreate });
</script>
